<template>
  <div class="other-error-container">
    <div class="ant-result vben-app-exception-page">
      <div class="ant-result-icon ant-result-image">
        <svg-icon class-name="ant-result-image" icon-class="no-data"></svg-icon>
        <div class="ant-result-title">{{ title }}</div>
        <a href="">
          <el-button type="primary" class="ant-result-extra">
            返回首页
          </el-button>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
  // 枚举值和后台一致
  const dic = {
    2001: {
      title: '用户未登录或登录状态失效,请重新登录！',
    },
    2002: {
      title: '用户无此功能访问权限！',
    },
    2006: {
      title: '当前机构不存在此账号信息,请正确选择机构或联系管理员！',
    },
    3001: {
      title: '系统繁忙，请稍后重试！',
    },
    2007: {
      title: '当前账户已被禁用，请联系管理员！',
    },
  }
  import SvgIcon from '@/components/SvgIcon/index.vue'
  import { computed } from '@vue/runtime-core'
  import { useRoute } from 'vue-router'
  export default {
    name: 'OtherError',
    components: { SvgIcon },
    setup() {
      const route = useRoute()
      console.log(dic)
      const title = computed(() => {
        if (parseInt(route.query.code)) {
          return dic[parseInt(route.query.code)].title
        } else {
          return '发生错误'
        }
      })
      return {
        title,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .other-error-container {
    width: 100%;
    height: 100%;
    // height: 100vh;
    background: #f0f2f5;
    .ant-result {
      padding: 48px 32px;
      .ant-result-icon {
        margin-bottom: 24px;
        text-align: center;
      }
      .ant-result-image {
        width: 400px;
        height: 300px;
        margin: auto;
      }
      .ant-result-title {
        margin-top: 20px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 24px;
        line-height: 1.8;
        text-align: center;
      }
      .ant-result-subtitle {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
      }
      .ant-result-extra {
        margin: 24px 0 0 0;
        text-align: center;
      }
    }
    .vben-app-exception-page {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  }
</style>
